//支付管理---列表展示
import React,{Component} from 'react'
import {Table,Icon,Divider,Button,Breadcrumb,message,Pagination } from 'antd'
import {Link} from 'react-router-dom'
import  './SplittingTemplate.css'
import * as tools from '../../../tools/tools'
import $ from 'jquery'
class SplittingTemplate extends Component{
  constructor(props){
    super(props)
    this.columns=[
      {
        title:'平台',
        dataIndex:'company',
      },
      {
        title:'城市服务商',
        dataIndex:'business',
      },
      {
        title:'客户经理',
        dataIndex:'person',
      },
      {
        title:'绑客商家',
        dataIndex:'bind',
      },
      {
        title:'推广商家',
        dataIndex:'recommend',
      },
      {
        title:'银行',
        dataIndex:'bank',
      }
    ]
    // this.num=[]
    this.state={
      num:[]
    }
  }
  componentWillMount(){
    tools.loginView(this).then(
      $.ajax({
        type:'post',
        url:tools.apiUrl+"payment/allot_programme_list",
        data:{
          token:localStorage.token
        },
        success:(res)=>{
          if(res.status ==1){
            this.setState({
              splitData:res.result
            })
          }else{
            message.error(res.msg)
          }
        }
      })
    )
  }

  SplittingGoback=()=>{     //返回按钮事件
    this.props.history.push("/HomePage/PaymentManagement")
  }

  addSplitting=()=>{        //点击添加方案
    this.props.history.push("/HomePage/PaymentManagement/SplittingAddacount")
  } 

  Transformation=(obj)=>{       //点击转换样式
    let key = 0;
    let newarr =[];
    let arr = this.state.num
    for(let i=0;i<arr.length;i++){
      if(arr[i] == obj){
        arr.splice(i,1);
        key =1;
        break;
      }
    }
    if(key ==0){
      arr.push(obj)
      this.setState({
        num:arr
      })
    }else{
      this.setState({
        num:arr
      })
    }
  }
  platformOrDel=(obj,num)=>{      //启用，删除方案
    tools.loginView(this).then(
      $.ajax({
        type:'post',
        url:num ==1?tools.apiUrl+'payment/is_platform':tools.apiUrl+"payment/allot_del",
        data:{
          token:localStorage.token,
          id:obj
        },
        success:(res)=>{
          if(res.status ==1){
            $.ajax({
              type:'post',
              url:tools.apiUrl+"payment/allot_programme_list",
              data:{
                token:localStorage.token
              },
              success:(res)=>{
                if(res.status ==1){
                  this.setState({
                    splitData:res.result
                  })
                }else{
                  message.error(res.msg)
                }
              }
            })
          }else{
            message.error(res.msg)
          }
        }
      })
    )
  }

  programmenum =(data)=>{       //支付列表
    if(data){
    return data.map((item,index)=>{
      return(
          <div className="Split_programme" >
            <div >
              <div className="SplitContent_title" style={(()=>{
                    let flag =0;
                    for(let i=0;i<this.state.num.length;i++){
                      if(this.state.num[i] ==item.id){
                        flag =1;
                        break;
                      }
                    }
                    return {backgroundColor:flag?"transparent":"#4C8EDB"}
              })()}>
                <div className='SplitContent_name'>{item.status ==2?item.name+"(启用中)":item.name}</div>
                <div className="SplitContent_Icon" onClick={()=>this.Transformation(item.id)}>
                  <Icon type={(()=>{
                      let flag =0;
                      for(let i=0;i<this.state.num.length;i++){
                        if(this.state.num[i] ==item.id){
                          flag =1;
                          break;
                        }
                      }
                      return flag?"down":"up"
                    })()} />
                </div>
              </div>
            </div>
            <div className="SplitContent_main" style={(()=>{
                    let flag =0;
                    for(let i=0;i<this.state.num.length;i++){
                      if(this.state.num[i] ==item.id){
                        flag =1;
                        break;
                      }
                    }
                    return {display:flag?"block":"none"}
              })()}>
              <div className="SplitContent_operation">
                <div style={{fontSize:'18px'}}>
                  基本信息
                </div>
                <div className="SplitContent_runeditdelete">
                  <div onClick={()=>this.platformOrDel(item.id,1)}><Icon type="right-circle" /></div>
                  <div><Link to={{pathname:"/HomePage/PaymentManagement/SplittingAddacount" ,state:{id:item.id}}}><Icon type="edit" /></Link></div>
                  <div onClick={()=>this.platformOrDel(item.id,0)}><Icon type="delete" /></div>
                </div>
              </div>
              <Divider />
              <div style={{display:'flex'}}>
                <div className="Splitmain_left">
                  <div>
                    <div className="Splitmain_linedata">
                      <div className="Splitmain_title">方案描述</div>
                      <div>{item.describe}</div>
                    </div>
                    <div className="Splitmain_linedata">
                      <div className="Splitmain_title">创建人</div>
                      <div >{item.founder}</div>
                    </div>
                    <div className="Splitmain_linedata">
                      <div className="Splitmain_title">创建时间</div>
                      <div>{new Date(item.created_at * 1000).toLocaleDateString()}</div>
                    </div>
                  </div>
                  <div style={{marginTop:'30px'}}>
                    <div style={{fontSize:'18px'}}>
                      利润与分配
                    </div>
                    <Divider />

                    {item.service.length>0?item.service.map((val)=>{
                        let dataSource=[{}];
                        dataSource[0].company = (val.company*100).toFixed(2)+'%'
                        dataSource[0].business = (val.business*100).toFixed(2)+'%'
                        dataSource[0].person = (val.person *100).toFixed(2)+'%'
                        dataSource[0].bind = (val.bind *100).toFixed(2)+'%'
                        dataSource[0].recommend = (val.recommend *100).toFixed(2)+'%'
                        dataSource[0].bank = (val.bank *100).toFixed(2)+'%'
                        return(
                          <div>
                            <div className="Splitmain_linedata">
                              <div className="Splitmain_title">投放渠道</div>
                              <div ><Button style={{color:'#4C8EDB'}}>{val.type==1?"未核销券":(val.type==2?"买单立减券":(val.type==3?"消费返券":"商圈联盟"))}</Button></div>
                            </div>
                            <div className="Splitmain_linedata">
                              <div className="Splitmain_title">手续费</div>
                              <div >{val.mode ==1?"签约费率":val.service*100+'%'}</div>
                            </div>
                            {val.mode ==1 ?false:
                            <div className="Splitmain_linedata">
                              <div className="Splitmain_title">分配</div>
                              <div >
                                <Table columns={this.columns} dataSource={dataSource} scroll={{ x: 700 }} pagination={false}/>
                              </div>
                            </div>}
                            <Divider />
                          </div>
                        )
                    }):false}

                  </div>
                </div>
                <div className="Splitmain_right">
                    <div>
                      <div className="SplitRight_content">
                        <div style={{marginLeft:'40px'}}>以该订单为例:</div>
                        <div style={{marginTop:'20px',marginLeft:'40px'}}>支付金额  110元</div>
                        <div style={{marginTop:'20px',marginLeft:'40px'}}>按此方案分润，则分润信息如下:</div>
                        <div className="SplitRight_distribution">

                          {item.service.map((val)=>{
                            return(
                              <div>
                                <div style={{fontWeight:"bold"}}>{val.type ==1?"使用未核销券":(val.type ==2?"使用买单立减券":(val.type ==3?"使用消费返券":"使用商圈联盟"))}</div>
                                <div>客户经理：{val.person?(110*val.person).toFixed(2):0}元</div>
                                <div>城市服务商：{val.business?(110*val.business).toFixed(2):0}元</div>
                                <div>锁客：{val.bind?(110*val.bind).toFixed(2):0}元</div>
                                <div>推广：{val.recommend?(110*val.recommend).toFixed(2):0}元</div>
                                <div>银行：{val.bank?(110*val.bank).toFixed(2):0}元</div>
                                <div>平台：{val.company?(110*val.company).toFixed(2):0}元</div>
                                <div>合计：{val.service?(110*val.service).toFixed(2):0}元</div>
                              </div>
                            )
                          })}
                        </div>
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        )
      })
    }
  }

  paginachange=(page, pageSize)=>{          //分页
    tools.loginView(this).then(
      $.ajax({
        type:'post',
        url:tools.apiUrl+"payment/allot_programme_list?page="+page,
        data:{
          token:localStorage.token
        },
        success:(res)=>{
          if(res.status ==1){
            this.setState({
              splitData:res.result
            })
          }else{
            message.error(res.msg)
          }
        }
      })
    )
  }

  render(){
    // console.log(this.state.splitData)
    let children = this.programmenum(this.state.splitData?this.state.splitData.data:false)
    return(
      <div className="tariff_box">
        <div>
          <Breadcrumb>
            <Breadcrumb.Item >
              支付管理
            </Breadcrumb.Item>
            <Breadcrumb.Item >
              费率管理   
            </Breadcrumb.Item>
            <Breadcrumb.Item >
              分润模板   
            </Breadcrumb.Item>
          </Breadcrumb>
        </div>
        <Divider />
        <div className="Split_content">
          <div className="Split_title">
              <span>方案列表</span>
              <div>
                <Button type="primary" onClick={this.addSplitting}>新建方案</Button>
                <Button onClick={this.SplittingGoback}>返回</Button>
              </div>
          </div>
          <Divider />

          {children}
          <Pagination style={{float:'right'}} showQuickJumper  total={this.state.splitData?this.state.splitData.last_page*10:false} onChange={this.paginachange}></Pagination>
        </div>
      </div>
    )
  }
}
export default SplittingTemplate